<template>
  <div class="teacher-info">
		<nav-bar></nav-bar>
    <div v-loading="loading">
      <div class="teacher-info-panel clearfix">
        <div class="tip-info clearfix">
          <div class="head-img">
            <img :src="data.avatar"/>
          </div>
          <div class="info">
            <div class="i-top">
              {{data.name}}
            </div>
            <div class="i-bottom">
              {{
                data.section == 0 ? '小学' :
                data.section == 1 ? '初中' :
                data.section == 2 ? '高中' :
                data.section == 3 ? '大学' : ''
              }}
                |  
              {{data.course}}
                |  
              教龄{{data.job_age}}年
                |  
              {{data.city}}
                |  
              {{data.job_level}}
            </div>
          </div>
        </div>
        <div class="tip-title">
          <div class="icon-group">
            <i class="xyd-medal" v-if="data.id_auth"></i>
            <i class="xyd-grade" v-if="data.edu_auth"></i>
          </div>
          <div class="text-group">
            <div>
              <div class="t1">{{data.hours}}</div>
              <div class="t2">累计学时</div>
            </div>
            <div>
              <div class="t1">{{data.student}}</div>
              <div class="t2">学生数</div>
            </div>
            <div>
              <div class="t1">{{data. good_rate}}%</div>
              <div class="t2">满意度</div>
            </div>
          </div>
        </div>
        <div class="tip-right">
          <div class="description">{{data.intro}}</div>
          <div class="btn-group">
            <button class="green-btn" @click="goTeacherCourse">我的课</button>
            <button class="yellow-btn">我的直播</button>
            <button class="common-btn">一对一辅导</button>
          </div>
        </div>
      </div>
      <div class="fieldset">
        <div class="legend">授课风格</div>
        <div class="content style">
          <ul>
            <li>
              <label>教师风格：</label><span>{{data.style ? data.style.join(' ') : ''}}</span>
            </li>
            <li>
             <label> 善教学生：</label><span>{{data.goodat ? data.goodat.join(' ') : ''}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="fieldset">
        <div class="legend">工作经历</div>
        <div class="content jobs">
          <ul>
            <li v-for="item,i in data.job" :key="i">{{item.start_time}}——{{item.end_time}}：{{item.intro}}</li>
          </ul>
        </div>
      </div>
      <div class="fieldset">
        <div class="legend">课程评价</div>
        <div class="content clearfix" v-if="data.comment_res">
          <div class="c-left">
            <comment-tag tag="课程评分" :pWidth="138" :total="5" :value="data.comment_res[0]" :label="data.comment_res[0]"></comment-tag>
            <comment-tag tag="描述相符" :pWidth="138" :total="5" :value="data.comment_res[1]" :label="data.comment_res[1]"></comment-tag>
            <comment-tag tag="教学态度" :pWidth="138" :total="5" :value="data.comment_res[2]" :label="data.comment_res[2]"></comment-tag>
            <comment-tag tag="课程质量" :pWidth="138" :total="5" :value="data.comment_res[3]" :label="data.comment_res[3]"></comment-tag>
          </div>
          <div class="c-right">
            <comment-tag tag="教师评价" :pWidth="138" :total="5" :value="data.comment_res[4]" :label="data.comment_res[4]"></comment-tag>
            <comment-tag tag="好评" :pWidth="138" :total="5" :value="data.comment_res[5]" :label="data.comment_res[5]"></comment-tag>
            <comment-tag tag="中评" :pWidth="138" :total="5" :value="data.comment_res[6]" :label="data.comment_res[6]"></comment-tag>
            <comment-tag tag="差评" :pWidth="138" :total="5" :value="data.comment_res[7]" :label="data.comment_res[7]"></comment-tag>
          </div>
        </div>
      </div>
      <ul class="comments">
        <comment-item :value="item" v-for="item,i in data.comment_list" :key="i"></comment-item>
      </ul>
    </div>
	</div>
</template>

<script>
import timg from '@/assets/mock_images/teacher.png'
import { getTeacherInfo } from 'api/teacher'
import { NavBar } from 'views/layout'
import commentItem from 'views/components/commentItem'
import commentTag from 'views/components/commentTag'
export default {
  name: 'TeacherInfo',
  components: {
    NavBar,
    commentItem,
    commentTag
  },
  data() {
    return {
      timg,
      loading: false,
      data: {}
    }
  },
  created() {
    const { id } = this.$route.params
    this.loading = true
    getTeacherInfo({
      tid: id
    })
    .then(res => {
      this.data = res.data
      this.loading = false
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    goTeacherCourse() {
      const { id } = this.$route.params
      this.$router.push('/teacher-course/' + id)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .teacher-info{
    .teacher-info-panel {
      background-color: #f4f4f4;
      min-height: 205px;
      width: 1200px;
      margin: 0 auto;
      position: relative;
      padding: 30px;
      .tip-info {
        position: absolute;
        top: 30px;
        left: 30px;
        height: 56px;
        .head-img {
          float: left;
          height: 56px;
          width: 56px;
          border-radius: 28px;
          overflow: hidden;
          img {
            width: 56px;
            height: 56px;
          }
        }
        .info {
          float: left;
          margin-left: 14px;
          .i-top {
            font-size: 18px;
          }
          .i-bottom {
            color: #999;
          }
        }
      }
      .tip-title{
        position: absolute;
        bottom: 30px;
        left: 30px;
        background-color: #fff;
        height: 76px;
        width: 482px;// todo
        // line-height: 76px;
        .icon-group{
          display: inline-block;
          vertical-align: middle;
          border-right: 1px solid #e5e6e7;
          padding: 18px 40px;
          height: 76px;
          >i.xyd-medal{
            margin-right: 20px;
          }
        }
        .text-group{
          display: inline-block;
          vertical-align: middle;
          >div{
            height: 60px;
            display: inline-block;
            vertical-align: middle;
            margin: 0 20px;
            .t1{
              line-height: 30px;
              font-size: 20px;
              font-weight: bold;
            }
            .t2{
              line-height: 30px;
              color: #999;
            }
          }
        }
      }
      .tip-right{
        float: right;
        width: 590px;
        .description{
          color: #666;
          min-height: 105px;
        }
        .btn-group{
          margin-top: 27px;
          height: 30px;
          >button{
            width: 100px;
            height: 30px;
            vertical-align: middle;
            font-size: 14px;
          }
        }
      }
    }
    .fieldset {
      width: 1200px;
      margin: 0 auto;
      padding: 30px 0;
      border-bottom: 1px solid #e5e6e7;
      .legend {
        font-size: 18px;
        color: #999;
      }
      .content{
        &.style{
          >ul{
            >li{
              line-height: 30px;
              >span{
                color: #999;
              }
            }
          }
        }
        &.jobs{
          >ul{
            >li{
              line-height: 30px;
            }
          }
        }
        .c-left{
          float: left;
          .item{
            >div{
              display: inline-block;
              width: 138px;
              height: 20px;
            }
          }
        }
        .c-right{
          float: left;
          margin-left: 30px;
        }
      }
    }
    .comments {

    }
  }
</style>

